<template>
  <panel>

    <!--列表搜索 复制-->
    <div class="search-box">
      <el-row class="form-horizontal">
        <el-col :span="12">
          <el-button type="primary" size="small" @click="addCity">新增</el-button>
          <el-button type="primary" size="small" @click="saveCity">保存</el-button>
          <el-button type="danger" size="small">删除</el-button>
        </el-col>
        <el-col :span="12" class="text-right">
          <el-button :plain="true" type="info" size="small" class="right" @click="handleIconClick">搜索</el-button>
          <el-col :span="16" class="right mr15">
            <el-input
              size="small"
              placeholder="请输入注册用户姓名"
              v-model="name">
            </el-input>
          </el-col>
        </el-col>
      </el-row>
    </div>
    <!--列表搜索 复制-->

    <!--列表 复制-->
    <el-table
      ref="multipleTable"
      :data="tableData"
      stripe
      border
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        prop="provinceid"
        label="省份编号"
        width="120">
        <template scope="scope">
          <div v-if="!scope.row.isEdit">
            {{ scope.row.provinceid }}
          </div>
          <div v-if="scope.row.isEdit">
            <el-input size="small" v-model="scope.row.provinceid" placeholder="请输入描述"></el-input>
          </div>
        </template>
      </el-table-column>

      <el-table-column
        prop="cityname"
        label="城市名称"
        show-overflow-tooltip>
        <template scope="scope">
          <div v-if="!scope.row.isEdit">
            {{ scope.row.cityname }}
          </div>
          <div v-if="scope.row.isEdit">
            <el-input size="small" v-model="scope.row.cityname" placeholder="请输入描述"></el-input>
          </div>
        </template>
      </el-table-column>

      <el-table-column
        prop="description"
        label="描述"
        show-overflow-tooltip>
        <template scope="scope">
          <div v-if="!scope.row.isEdit">
            {{ scope.row.description }}
          </div>
          <div v-if="scope.row.isEdit">
            <el-input size="small" v-model="scope.row.description" placeholder="请输入描述"></el-input>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!--列表 复制-->

    <!--分页 复制-->
    <div class="page-wrap">
      <page :page-list="pageData" @pagesearch="init"></page>
    </div>
    <!--分页 复制-->
  </panel>
</template>

<script>
  import httpClient from '@/utils/httpClient';
  import page from '@/components/page';
  import axios from 'axios';
  import {getList,saveCity} from '@/api/city';

  export default {
    components: {page},
    data() {
      return {
        tableData: [],
        //表格新增集合
        insertData: [],
        //表格选中集合
        multipleSelection: [],
        //重点搜索
        name: '',
        //form表单对象
        ruleForm: {
          name: ''
        },
        //分页模拟数据 严格参照参数名
        pageData: {
          list: [],
          pageNumber: 1,
          pageSize: 10,
          totalCount: 0,
          totalPage: 0
        }
      }
    },
    mounted(){
      /**
       * 默认获取数据 并 赋值给 pageData
       */
      this.init(this.pageData.pageNumber, this.pageData.pageSize);
    },
    methods: {
      /**
       * 重点搜索
       */
      handleIconClick(ev) {
        console.log(ev);
      },

      /**
       * 高级搜索
       */
      submitForm(formName) {
        console.log('submit!');
      },

      /**
       * 初始化表格 / 分页搜索 事件
       */
      init(number, size){
        const _this = this;
        let page = {pageNumber: number, pageSize: size};

        axios.get('/api/list/' + number + '/' + size+ '/' + "语音").then(function (response) {
          console.log("测试是否联通: ", response.data);
          _this.tableData=response.data;
        }).catch(function (error) {
          console.log("error: ", error);
        });
      },
      /**
       * 表格新增事件
       */
      addCity(){
        const _this = this;
        let city = {
          provinceid: '',
          cityname: '',
          description: '',
          isEdit: true
        }
        _this.tableData.push(city);
        _this.pageData.list.push(city);
        for (let i = 0; i < _this.tableData.length; i++) {
          if (i == _this.tableData.length - 1) {
            _this.insertData.push(_this.tableData[i]);
          }
        }
      },
      /**
       * 表格保存事件
       */
      saveCity(){
        const _this = this;
        if (_this.insertData.length > 0) {
          saveCity(JSON.stringify(_this.insertData[0])).then(response => {
            console.log("response: ",response);
          }).catch(error => {
            console.log("error: ",error);
          });

        }
      },
      /**
       * 表格选择事件
       */
      handleSelectionChange(val) {
        this.multipleSelection = val;
      }
    }
  }
</script>

<style>

</style>
